<template>
  <div class="general-account-box">
    <div>
      <div v-if="dataInfo.mobile"
           class="account-bind">
        <div class="account-unbound-left">
          <div><i class="el-icon-warning-outline outline-icon-bind" /></div>
          <span class="text"> 手机号：{{basicInfo.mobile}}</span>
        </div>
        <div><el-button type="text">解绑</el-button><el-button type="text">换绑</el-button></div>
      </div>
      <div v-else
           class="account-unbound">
        <div class="account-unbound-left">
          <div><i class="el-icon-warning-outline outline-icon-unbound" /></div>
          <div class="conspicuous">【未绑定】<span class="text">手机号</span></div>
        </div>
        <div><el-button type="text"
                     @click="handerBind">绑定</el-button></div>
      </div>
      <div class="desc">作为安全手机，可以找回密码，可用于登录系统。</div>
    </div>
    <BindMobile v-model="visible" />
  </div>
</template>

<script>
import BindMobile from '../components/BindMobile.vue'

export default {
  name: 'GeneralAccountBind',
  components: { BindMobile },
  props: {
    basicInfo: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      visible: false
    }
  },
  computed: {
    dataInfo () {
      let values = {}
      if (!this.basicInfo?.mobile) {
        values = { ...this.basicInfo, mobile: null }
      }
      return values
    }
  },
  methods: {
    handerBind () {
      this.visible = true
    }
  }
}
</script>

<style scoped>
.general-account-box {
  margin: 20px;
  padding: 20px;
  /* background-color: #f2f2f2; */
  border-bottom: 1px solid #e0e0e0;
}
.account-unbound,
.account-bind {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.outline-icon-unbound {
  font-size: 24px;
  color: var(--prev-color-text-purered);
}
.account-unbound-left {
  display: flex;
  align-items: center;
}
.outline-icon-bind {
  font-size: 24px;
  color: #51c800;
  padding-right: 5px;
}
.desc {
  padding-left: 30px;
  font-size: 12px;
  color: #666;
  padding-top: 10px;
}
.conspicuous {
  color: var(--prev-color-text-purered);
}
.text {
  color: var(--prev-color-text-primary);
}
</style>